<template>
  <div class="list">
    <div class="listItem wow fadeInLeft" :data-wow-delay="0+0.3*index+'s'"
         v-for="(item,index) in list"
         :key="index">
      <progressBar :total="total" :item="item"></progressBar>
    </div>
  </div>
</template>

<script>
import progressBar from './progressBar.vue'

export default {
  data () {
    return {}
  },
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: { progressBar },
  computed: {
    total: function () {
      var total = 0
      this.list.forEach((type) => {
        total = total + type.value
      })
      return total
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  width: calc(100% - 0px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  height: 100%;

  .listItem {
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    height: 30%;
    width: 100%;
  }
}
</style>
